<template>
  <div class="chart-content">
    <div class="title">计划完成率&产能利用率</div>

    <div class="wrap">
      <CustomChart
        v-if="option.xAxis.data.length"
        class="chart"
        :option="option"
        :defaultZoomPosition="{ xAxis: 'currentMonth' }"
      />
      <div v-else class="no-data">暂无数据</div>
    </div>
  </div>
</template>

<script>
import CustomChart from "../../components/CustomChart";
import { transform } from "./commom";
export default {
  name: "RightChart1",
  components: { CustomChart },
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    monthProduceData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      option: {
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#4CE1E1", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#32F5FF", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#FF6A23", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#FFA432", // 100% 处的颜色
              },
            ],
          },
        ],
        grid: {
          top: 58,
          left: 60,
          bottom: 40,
          right: 30,
        },
        title: {
          text: "",
          left: 20,
          top: 10,
          textStyle: {
            color: "#ffffff",
            fontSize: 14,
            fontWeight: 500,
            rich: {
              highlight1: {
                color: "#46fbff",
                fontSize: 14,
              },
              highlight2: {
                color: "#ff7d28",
                fontSize: 14,
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          padding: [5, 10],
          axisPointer: {
            type: "shadow",
          },
          formatter(params) {
            return `${
              params[0].name
            }<br /><i class="tooltip-circle" style="background-color:${
              params[0].color.colorStops[0].color
            };"></i>${params[0].seriesName}：${transform(
              params[0].value
            )}%<br /><i class="tooltip-circle" style="background-color:${
              params[1].color.colorStops[0].color
            };"></i>${params[1].seriesName}：${transform(
              params[1].value
            )}%<br /><i class="tooltip-circle" style="background-color:#8a64c1;"></i>
            计划产量：${transform(
              params[0].data.planQty
            )}箱<br /><i class="tooltip-circle" style="background-color:#d9b169;"></i>
            实际产量：${transform(params[0].data.actualQty)}箱`;
          },
        },
        legend: {
          data: [{ name: "计划完成率" }, { name: "产能利用率" }],
          right: 20,
          top: 10,
          // orient: "vertical",
          textStyle: {
            color: "#ffffff",
          },
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 5,
            xAxisIndex: 0,
            filterMode: "empty",
          },
          {
            type: "slider",
            startValue: 0,
            endValue: 5,
            bottom: "3%",
            top: "93%",
            xAxisIndex: 0,
            showDetail: false,
            borderColor: "rgba(167,183,204,0.45)",
            fillerColor: "rgba(167,183,204,0.2)",
            filterMode: "empty",
          },
        ],
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: "#485073",
            },
          },
          axisLabel: {
            interval: 0,
            color: "rgba(255, 255, 255, 0.6)",
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          name: "",
          nameGap: 26,
          position: "left",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#485073",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.6)",
            formatter(value) {
              return value + "%";
            },
            fontSize: 11,
            hideOverlap: true,
          },
          axisTick: {
            show: false,
          },
          splitNumber: 5,
        },
        series: [
          {
            name: "计划完成率",
            data: [103, 98, 92, 91, 80],
            type: "line",
            connectNulls: true,
            label: {
              show: true,
              position: "top",
              formatter: "{c}%",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
          },
          {
            name: "产能利用率",
            data: [2, 10, 5, 3.5, 12],
            type: "line",
            connectNulls: true,
            label: {
              show: true,
              position: "top",
              formatter: "{c}%",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
          },
        ],
      },
    };
  },
  methods: {
    async getData() {
      if (!this.monthProduceData) {
        return;
      }

      try {
        const { yearSumCompleteRatio, yearSumCapacityUseRatio, monthDatas } =
          this.monthProduceData;

        let xAxisData = [];
        let seriesData1 = [];
        let seriesData2 = [];
        let maxDataValue = 0;
        monthDatas.forEach((ele) => {
          xAxisData.push({
            value: ele.produceMonth,
            ...ele,
          });
          seriesData1.push({
            value: ele.completeRatio,
            produceMonth: ele.produceMonth,
            planQty: ele.planQty,
            actualQty: ele.actualQty,
          });
          seriesData2.push({
            value: ele.capacityUseRatio,
            produceMonth: ele.produceMonth,
            planQty: ele.planQty,
            actualQty: ele.actualQty,
          });

          if (ele.completeRatio > maxDataValue) {
            maxDataValue = ele.completeRatio;
          } else if (ele.capacityUseRatio > maxDataValue) {
            maxDataValue = ele.capacityUseRatio;
          }
        });

        this.option.title.text = `年累计计划完成率 {highlight1|${
          yearSumCompleteRatio || 0
        }%}，年累计产能利用率 {highlight1|${yearSumCapacityUseRatio || 0}%}`;
        this.option.xAxis.data = xAxisData;
        this.option.yAxis.max = maxDataValue > 100 ? "dataMax" : 100;
        this.option.series[0].data = seriesData1;
        this.option.series[1].data = seriesData2;
      } catch (error) {
        this.option.title.text = `年累计计划完成率 {highlight1|0%}，年累计产能利用率 {highlight1|0%}`;
        this.option.xAxis.data = [];
        this.option.yAxis.max = 100;
        this.option.series[0].data = [];
        this.option.series[1].data = [];
      }
    },
  },
  watch: {
    monthProduceData: {
      handler() {
        this.getData();
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.chart-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .wrap {
    flex: 1;
    width: 100%;
    height: 100%;
  }

  .chart {
    flex: 1;
  }
}
</style>
